<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="script/vue-2.4.0.js"></script>
</head>

<body>

















    <!-- <div id="app">
        <table border="1">
            <tr>
                <th>商品编号</th>
                <th>商品名称</th>
                <th>原价</th>
                <th>折扣价</th>
                <th>美元</th>
                <th>商品类别</th>
            </tr>
            <tr v-for="(item,index) in GoodList" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td><s>{{'￥'+parseFloat(item.price).toFixed(1)}}</s></td>
                <td>{{item.price | discount(item.category)}}</td>
                <td>${{item.price | discount(item.category) | discount1}}</td>
                <td>{{item.category | cat}}</td>
            </tr>
        </table>
    </div>
    <script>
        var vm = new Vue({
                el: '#app',
                data: {
                    GoodList: [{
                        id: '1001',
                        name: '三星手机',
                        price: 3800.0,
                        category: 1
                    }, {
                        id: '1002',
                        name: '海飞丝洗发水',
                        price: 56.0,
                        category: 2
                    }, {
                        id: '1003',
                        name: '飞科刮胡刀',
                        price: 900.0,
                        category: 1
                    }, ]
                },
                filters: {
                    discount: function(value, category) {

                        if (category == 1) {
                            return (value * 0.8).toFixed(1)
                        } else if (category == 2) {
                            return (value * 0.5).toFixed(1)
                        }
                    },

                    discount1: function(value) {


                        return (value * 0.1481).toFixed(2)

                    },

                    cat: function(value) {

                        switch (value) {
                            case 1:
                                return `电子产品`
                                break;
                            case 2:
                                return `生活用品`
                                break;

                        }
                    },

                },
            },

        )
    </script> -->









    <!-- 8-2作业 
        实现1：使用v-for循环显示emp数组中的员工信息，到table表格中。
            难点：删除是一个超链接（按钮），点击某个员工就删除某个，获得删除的标识index。删除就是从emp数组中删除，所有是通过index下标来删除。数组中删除了那个员工，页面就自然不会显示。
            知识点：parseFloat(number).toFixed(2)、奖金显示 三目运算符、v-for指令
        实现2：表单录入新员工信息，Vue的事件方法中获得表单输入的员工信息，存入到数组中。
            难点：员工的id是不需要录入，id是最后一名员工的id+1。
            知识点：v-model双向数据绑定，字符串转number修饰符、添加数组push方法
        实现3: 清空数据，删除数组。
            知识点：splice方法 -->
    <!-- <div style="margin-left: 600px;">
        <div id="yxx802">
            <h3>录入员工的数据</h3>
            姓名: <input type="text" v-model="newEmp.name" /><br> 性别: <select v-model="newEmp.sex">
            <option value="1">男</option>
            <option value="0">女</option>
        </select><br> 月薪: <input type="text" v-model="newEmp.salary"><br> 奖金: <input type="text" v-model="newEmp.comm"><br>
            <a href="#" @click.prevent="addTo">添加员工信息</a><br><br>
            <hr> -->
    <!-- 循环遍历对象数组 -->
    <!-- <table border="1px"> -->
    <!-- 表格的标题行 -->
    <!-- <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>月薪</th>
                    <th>奖金</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(staff,index) in emp" :key="staff.id">
                    <td>{{staff.id}}</td>
                    <td>{{staff.name}}</td>
                    <td>{{staff.sex==0?'女':'男'}}</td>
                    <td>{{parseFloat(staff.salary).toFixed(2)}}</td>
                    <td>{{(staff.comm!==0)?parseFloat(staff.comm).toFixed(2):'没有奖金'}}</td>
                    <td><a href="#" @click.prevent="delEmp(index)">删除</a></td>
                </tr>
                <tr>
                    <td colspan="6" align="center">
                        <button @click="delAll">清空数据</button>
                    </td>
                </tr>
            </table>
            <hr> 搜索框：
            <input type="text" v-model="sempname" @input="search" />
        </div>
    </div> -->
    <!-- <script>
        var vm = new Vue({
            el: '#yxx802',
            data: {
                //单独员工对象
                newEmp: {
                    id: '0',
                    name: '',
                    sex: 1,
                    salary: 0.0,
                    comm: 0
                },
                emp: [{
                    id: '202201',
                    name: 'JACK',
                    sex: 0,
                    salary: 3000.0,
                    comm: 0
                }, {
                    id: '202202',
                    name: 'KING',
                    sex: 1,
                    salary: 5000.0,
                    comm: 100
                }, {
                    id: '202203',
                    name: 'TOM',
                    sex: 0,
                    salary: 3500.0,
                    comm: 0
                }, {
                    id: '202204',
                    name: 'JAMES',
                    sex: 1,
                    salary: 6000.0,
                    comm: 400
                }],
                //用来搜索的数组，数组的备份
                searchEmp: [{
                        id: '202201',
                        name: 'JACK',
                        sex: 0,
                        salary: 3000.0,
                        comm: 0
                    }, {
                        id: '202202',
                        name: 'KING',
                        sex: 1,
                        salary: 5000.0,
                        comm: 100
                    }, {
                        id: '202203',
                        name: 'TOM',
                        sex: 0,
                        salary: 3500.0,
                        comm: 0
                    }, {
                        id: '202204',
                        name: 'JAMES',
                        sex: 1,
                        salary: 6000.0,
                        comm: 400
                    }

                ],
                sempname: ''
            },

            methods: {
                //删除
                delEmp(index) {

                    if (window.confirm('确定要删除员工信息吗？')) {
                        this.emp.splice(index, 1)
                    }
                },
                //全部清空
                delAll() {
                    if (window.confirm('确定要清空数据吗？')) {
                        //this.emp = [] //方法1
                        //方法2
                        this.emp.splice(0, this.emp.length)
                    }

                },
                //添加一行
                addTo() {
                    if (this.emp.length == 0) {
                        //如果数组中长度是0，代表没有员工
                        this.newEmp.id = '202201' //如果数组中没有员工，直接赋值员工id
                    } else {
                        //员工编号 从数组最后一个id+1
                        //取出最后一个员工 this.emp[this.emp.length-1]，数组最后一个员工下标等于长度减一
                        //因为员工的id是字符串类型，需要转换为int然后加1
                        id1 = parseInt(this.emp[this.emp.length - 1].id)
                        this.newEmp.id = id1 + 1 //将产生的
                    }
                    //push新的对象到数组，新的对象取值从newEmp这个双向绑定的对象中取
                    this.emp.push({
                        id: this.newEmp.id,
                        name: this.newEmp.name,
                        sex:this.newEmp.sex,
                        salary: this.newEmp.salary,
                        comm: this.newEmp.comm
                    })
                    this.searchEmp.push({
                        id: this.newEmp.id,
                        name: this.newEmp.name,
                        sex:this.newEmp.sex,
                        salary: this.newEmp.salary,
                        comm: this.newEmp.comm
                    })
                },
                search() {
                    this.emp = [] //emp是需要在页面直接显示，搜索出来什么员工，emp显示什么员工
                    for (let i in this.searchEmp) {
                        //i相当于index
                        if (this.searchEmp[i].name.indexOf(this.sempname) >= 0) {
                            //有返回大于0 没有返回-1
                            this.emp.push(this.searchEmp[i]) //将根据sempname搜索名字查询出来的员工信息给 到emp。
                        }
                    }
                },
            }
        })
    </script> -->









    <!-- v-on修饰符 -->
    <!-- <div id="yxx">
        <div style="width: 200px;height:200px;background-color:aliceblue" @click="test1">
            <div style="width: 100px;height:100px;background-color:rgb(24, 130, 222)" @click.stop="test2"></div>
        </div>
        <a href="http://www.baidu.com" @click.prevent="linkBe">baidu</a>
        <a href="http://www.baidu.com" @click.prevent.once="linkBe">百度</a>

        <div style="width: 200px;height:200px;background-color:aliceblue" @click.capture="test1">
            <div style="width: 100px;height:100px;background-color:rgb(24, 130, 222)" @click="test2"></div>
        </div>
        <div style="width: 200px;height:200px;background-color:aliceblue" @click.capture="test1">
            <div style="width: 100px;height:100px;background-color:rgb(24, 130, 222)" @click.self="test2">
                <div style="width: 50px;height:50px;background-color:rgb(232, 41, 178)" @click="test3">

                </div>
            </div>
        </div>
    </div> -->

    <!-- <script>
        var vm = new Vue({
            el: '#yxx',
            data: {},
            methods: {
                test1() {
                    alert('外层');
                },
                test2() {
                    alert('内层');
                },
                test3() {
                    alert('最内层');
                },
                linkBe() {
                    alert('超链接点击');
                }
            },

        })
    </script> -->










    <!-- v-on -->
    <!-- <div id="app"> -->
    <!-- <button @click="vueTest('xin')">vue单击事件</button> -->
    <!-- 点击输出city数组中的内容 -->
    <!-- <button @click="printCitys">输出城市</button> -->
    <!-- <input type="text" @keyup.enter="countStr" /> -->
    <!-- </div> -->
    <!-- <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                countStr() {
                    //获得文本框输入的文本内容 思路：获得event对象，使用event对象获得事件源对象（文本框），使用文本框获得value属性
                    //event.target获得事件源对象（也就是获得触发事件的文本框）
                    //value 是文本框的属性，代表文本框输入的内容
                    var str = event.target.value
                    alert('输入的文本内容是：' + str + '\n输入的字符个数是' + str.length)
                        //统计文本内容字符个数
                        //消息框显示出文本数据和字符个数
                    console.log('键盘按下事件触发')
                }
            },
        })
    </script> -->




    <!-- 20220801 -->
    <!-- <div id="app"> -->
    <!-- v-bind:src可以简写成:src 只针对与v-bind这个指令-->
    <!-- <a href="https://www.baidu.com/">
        <img :src="imgs" :alt="info">
    </a> -->
    <!-- <a :href="link">
        <img :src="imgs" :alt="info">
    </a>
</div> -->
    <!-- <script>
    var vm = new Vue({
        el: '#app',
        data: {
            imgs: 'imgs/baidu.jpg',
            info: '百度图标',
            link: 'https://www.baidu.com/'
        },
    })
</script> -->

</body>

</html>